<template>
    <div>
        <el-row :gutter="20">
            <el-card shadow="hover" style="height:403px;">
                <div slot="header" class="clearfix">
                    <span>商品列表</span>
                    <el-button style="float: right; padding: 3px 0" @click="add" type="text">添加</el-button>
                </div>
                <el-tabs :tab-position="tabPosition">
                    <el-tab-pane v-for="huojia in huoJiaList" :label="huojia.name">
                        <el-input v-model="huojia.name" @change="updaethuojia(huojia)" placeholder="请输入内容"></el-input>
                        <el-switch v-model="huojia.isShow" @change="updaethuojia(huojia)" active-color="#13ce66"
                            inactive-color="#ff4949" active-value="1" inactive-value="0">
                        </el-switch>
                        <el-button style="float: right; padding: 3px 0" @click="addsp(huojia)" type="text">添加商品</el-button>
                        <el-collapse v-model="activeNames" @change="handleChange">
                            <el-collapse-item v-for="sp in huojia.splist" :title="sp.name" :name="sp.id">
                                <el-button style="float: right; padding: 3px 0" @click="thesp=sp,addgg(sp.id)"
                                    type="text">添加规格</el-button>
                                <el-descriptions v-for="gg in sp.guiGeList">
                                    <el-descriptions-item label="名称">
                                        <el-input v-model="gg.name" placeholder="请输入内容"></el-input>
                                    </el-descriptions-item>
                                    <el-descriptions-item label="价格">
                                        <el-input-number v-model="gg.pice" @change="handleChange" :min="1" :max="10"
                                            label="描述文字"></el-input-number>
                                    </el-descriptions-item>
                                    <el-descriptions-item label="库存">
                                        <el-input-number v-model="gg.num" @change="handleChange" :min="1" :max="10"
                                            label="描述文字"></el-input-number>
                                    </el-descriptions-item>
                                </el-descriptions>
                            </el-collapse-item>
                        </el-collapse>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </el-row>
        <el-dialog title="新增规格" :visible.sync="ggadd" width="30%" :before-close="handleClose">
            <div>
                名称<el-input v-model="setgg.name" placeholder="请输入内容"></el-input>
            </div>
            <div>
                价格
                <el-input-number v-model="setgg.pice" @change="handleChange" :min="1" :max="10"
                    label="描述文字"></el-input-number>
            </div>
            <div>
                库存
                <el-input-number v-model="setgg.num" @change="handleChange" :min="1" :max="10"
                    label="描述文字"></el-input-number>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="ggadd = false">取 消</el-button>
                <el-button type="primary" @click="doaddgg(); spadd = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="新增商品" :visible.sync="spadd" width="30%" :before-close="handleClose">
            <span>
                名称<el-input v-model="setsp.name" placeholder="请输入内容"></el-input>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="spadd = false">取 消</el-button>
                <el-button type="primary" @click="doaddsp(); spadd = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="新增货架" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <span>
                名称<el-input v-model="setHuoJia.name" placeholder="请输入内容"></el-input>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addhuojia(); dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Schart from 'vue-schart';
import { getSpList, setHuoJia, setSp, setGuiGe } from '../../api/sp';
export default {
    name: 'dashboard',
    data() {
        return {
            name: localStorage.getItem('ms_username'),
            dialogVisible: false,
            spadd: false,
            tabPosition: 'left',
            setHuoJia: {
                name: "",
                isShow: ""
            },
            thesp:{},
            activeNames: ['1'],
            sete: {},
            setsp: {
                name: ""
            },
            setgg: {},
            ggadd: false,
            huoJiaList: [
            ]
        }
    },
    components: {
        Schart
    },
    computed: {
    },
    created() {
        this.getData();
    },
    activated() {
        this.getData();
    },
    methods: {
        getData() {
            getSpList().then(e => {
                if (e.code == 200) {
                    this.huoJiaList = e.data
                } else {
                    this.$message.error(e.msg);
                    return false;
                }
            })
        },
        addhuojia() {
            setHuoJia(this.setHuoJia).then(e => {
                if (e.code == 200) {
                    if (this.setHuoJia.id == undefined) {
                        this.huoJiaList.push(e.data)
                    }
                } else {
                    this.$message.error(e.msg);
                    return false;
                }
            })
        },
        updaethuojia(e) {
            setHuoJia(e).then(e => {
                if (e.code == 200) {
                    this.$message.success("新增成功");
                }
            })
        },
        add() {
            console.log(23333);
            this.dialogVisible = true,
                this.setUser = {
                    mobilePhone: "",
                    userName: "",
                    password: ""
                }
        },
        addsp(e) {
            console.log(e);
            this.spadd = true,
                this.sete = e
            this.setsp = {
                name: "",
                huoJiaId: e.id
            }
        },
        addgg(e) {
            this.ggadd = true,
                this.setgg = {
                    name: "",
                    spId: e,
                    num: 0,
                    pice: 0
                }
        },
        doaddgg() {
            setGuiGe(this.setgg).then(e => {
                if (e.code == 200) {
                    if (this.setgg.id == undefined) {
                        this.thesp.guiGeList.push(e.data)
                        this.ggadd = false
                    }
                } else {
                    this.$message.error(e.msg);
                    this.ggadd = false
                    return false;
                }
            })
        },
        doaddsp() {
            setSp(this.setsp).then(e => {
                if (e.code == 200) {
                    if (this.setsp.id == undefined) {
                        this.sete.splist.push(e.data)
                        this.spadd = false
                    }
                } else {
                    this.$message.error(e.msg);
                    this.spadd = false
                    return false;
                }
            })
        }
    }
};
</script>


<style scoped>
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}</style>
